<template>
  <div class="main-pre">
    <div class="main-left">
      <p class="title">虚拟仿真技术在动画镜头语言中的应用</p>
      <div class="btns">
        <el-button type="info" @click="goComment"
          >讨论区<i class="el-icon-upload el-icon--right"></i
        ></el-button>
        <el-button type="info" icon="el-icon-search">申报年份2019</el-button>
      </div>
      <ul class="tags" style="white-space: nowrap">
        <li>所属专业类：艺术学类</li>
        <li>对应专业：动画</li>
        <li>课程类型：专业必修课</li>
        <li>实验类型：综合设计型</li>
      </ul>
      <div class="infos">
        <p style="font-size:14px">
          镜头语言通常是视听语言理论中的一部分，学生通常是死记硬背，很难深刻理解。而专业的摄影设备无法满足大量学生的需求。在当前的实验条件下，本项目采用虚拟仿真实验，利用三维技术、虚拟现实技术等构建的“虚拟影棚”为学生创造真实的体验。
        </p>
      </div>
      <el-button type="primary" size="medium" @click="goExperiment"
        >我要做实验</el-button
      >
    </div>
    <div class="main-right">
      <div v-show="isShow">
        <div class="videoTab">
          <el-button  @click="isShowVideo=true" class="btn1">实验简介视频</el-button>
          <el-button @click="isShowVideo=false" class="btn2">教学引导视频</el-button>
        </div>
        <div class="video-box">
          <video
           v-show="isShowVideo"
            src="../../assets/img/class_introduce.mp4"
            class="video"
            preload="preload"
            controls
          ></video>
          <video
          v-show="!isShowVideo"
            src="../../assets/img/experiment_guide.mp4"
            class="video"
            preload="preload"
            controls
          ></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isShowVideo:true
    };
  },
  methods: {
    goExperiment() {
      this.$router.push("/experiment");
    },
    goComment(){
      this.$router.push("/experiment/comment")
    }
  },
};
</script>

<style scoped>
.main-pre {
  height: 380px;
  width: 100%;
  display: flex;
  /* padding: 0 100px; */
}
.main-left {
  background: radial-gradient(
    ellipse at center,
    rgba(116, 69, 103, 1) 0%,
    rgba(116, 69, 103, 1) 22%,
    rgba(106, 65, 102, 1) 35%,
    rgba(86, 60, 93, 1) 46%,
    rgba(47, 58, 89, 1) 66%,
    rgba(47, 58, 89, 1) 100%
  );
  height: 380px;
  width: 100%;
  padding-left:100px;
}
.title {
  font-size: 24px;
  color: white;
  font-weight: 600;
}
.tags {
  font-size: 14px;
  display: flex;
  width: 100%;
  color: #fff;
  opacity: 0.5;
  margin-left: -2px;
  margin-top: 15px;
  line-height: 20px;
}
.main-right {
  width: 40%;
  background-color: #2f3a59;
  padding-top: 60px;
  padding-left: 76px;
}
.infos {
  color: #fff;
}
.video {
  width: 380px;
  height: 218px;
}
.btn1:hover{
 background-color: #2f3a59!important;
}
.btn2:hover{
 background-color: #2f3a59!important;
}
</style>